<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
    <style>
        /* 通用样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 容器样式 */
        .container {
            height: 100vh;
            position: relative;
            background-color: #D9E7F7;
        }

        /* 背景头部样式 */
        .background .header {
            margin-left: 20px;
            padding: 50px 20px 20px;
            text-align: left;
        }
        .main-title {
            font-size: 24px;
            color: #004572;
            font-weight: bold;
            margin-bottom: 10px;
        }
        .sub-title {
            font-size: 14px;
            color: #004572;
        }

        /* 登录卡片 */
        .login-card {
            position: relative;
            width: 85%;
            margin: 10px auto 0;
            background: #FFFFFF;
            border-radius: 12px;
            padding: 30px 20px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }

        /* 表单样式 */
        .form {
            margin-top: 30px;
        }
        .input-item {
            width: 100%;
            padding: 15px 0;
            border: none;
            border-bottom: 1px solid #eee;
            font-size: 14px;
            margin-bottom: 15px;
        }
        .input-item::placeholder {
            color: #999;
        }

        /* 验证码行 */
        .code-row {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
        }
        .send-btn {
            width: 200px;
            height: 40px;
            background: #2979FF;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 4px;
            cursor: pointer;
        }
        .send-btn:disabled {
            background: #ccc;
            cursor: not-allowed;
        }

        /* 登录切换 */
        .switch-login {
            color: #2979FF;
            font-size: 12px;
            cursor: pointer;
            display: block;
            margin: 15px 0;
        }

        /* 登录按钮 */
        .login-btn {
            width: 100%;
            background: #2979FF;
            color: white;
            border: none;
            padding: 15px;
            border-radius: 22px;
            font-size: 16px;
            margin-top: 25px;
            cursor: pointer;
        }

        /* 协议条款 */
        .agreement-container {
            display: flex;
            align-items: center;
            padding: 12px;
            margin-top: 20px;
        }
        .custom-radio {
            width: 18px;
            height: 18px;
            border: 2px solid #999;
            border-radius: 50%;
            position: relative;
            margin-right: 8px;
        }
        .custom-radio.selected {
            border-color: #2979FF;
            background-color: #2979FF;
        }
        .inner-circle {
            width: 8px;
            height: 8px;
            background: white;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .agreement-text {
            font-size: 12px;
            display: flex;
            align-items: center;
        }
        .protocol-link {
            color: #2979FF;
            text-decoration: none;
            margin: 0 2px;
        }

        /* 其他登录方式 */
        .divider-container {
            display: flex;
            align-items: center;
            margin: 20px 0;
        }
        .divider-line {
            flex: 1;
            height: 1px;
            background-color: #ddd;
        }
        .divider-text {
            padding: 0 12px;
            font-size: 14px;
            color: #666;
        }
        .icons-container {
            display: flex;
            justify-content: center;
            gap: 30px;
            margin-top: 15px;
        }
        .icon {
            width: 48px;
            height: 48px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="background">
            <div class="header">
                <div class="main-title">Hello!</div>
                <div class="sub-title">欢迎使用蛋壳智慧养老服务平台</div>
            </div>
        </div>

        <div class="login-card">
            <div class="header">
                <div class="main-title">登录</div>
            </div>

            <div class="form">
                <input type="tel" class="input-item" id="phone" 
                       placeholder="请输入手机号码">
                
                <div class="code-row">
                    <input type="text" class="input-item" id="code" 
                           placeholder="验证码">
                    <button class="send-btn" id="sendBtn" 
                            onclick="sendVerifyCode()">发送验证码</button>
                </div>

                <span class="switch-login" onclick="switchLoginType()">密码登录</span>

                <button class="login-btn" onclick="handleLogin()">登录</button>

                <div class="agreement-container">
                    <div class="custom-radio" id="agreeRadio" 
                         onclick="toggleAgree()"></div>
                    <span class="agreement-text">
                        我已阅读并同意
                        <a href="#" class="protocol-link">《隐私协议》</a>
                        <span class="separator">和</span>
                        <a href="#" class="protocol-link">《服务协议》</a>
                    </span>
                </div>
            </div>

            <div class="other-login">
                <div class="divider-container">
                    <div class="divider-line"></div>
                    <div class="divider-text">其他登录方式</div>
                    <div class="divider-line"></div>
                </div>
                <div class="icons-container">
                    <img src="https://www.ruanzi.net/jy/wxuser/103/images/pages/WeChat.png" alt="微信" class="icon">
                    <img src="https://www.ruanzi.net/jy/wxuser/103/images/pages/QQ.png" alt="QQ" class="icon">
                </div>
            </div>
        </div>
    </div>

    <script>
        let state = {
            phone: '',
            code: '',
            agree: false,
            isSending: false,
            countdown: 0,
            isPasswordLogin: false
        };

        // 协议勾选
        function toggleAgree() {
            state.agree = !state.agree;
            const radio = document.getElementById('agreeRadio');
            radio.classList.toggle('selected', state.agree);
        }

        // 发送验证码
        function sendVerifyCode() {
            const phone = document.getElementById('phone').value;
            if (!/^1[3-9]\d{9}$/.test(phone)) {
                alert('手机号格式错误');
                return;
            }

            state.isSending = true;
            state.countdown = 60;
            const btn = document.getElementById('sendBtn');
            
            const timer = setInterval(() => {
                state.countdown--;
                btn.textContent = state.countdown > 0 
                    ? `${state.countdown}s后重发` 
                    : '发送验证码';
                btn.disabled = state.countdown > 0;

                if (state.countdown <= 0) {
                    clearInterval(timer);
                    state.isSending = false;
                }
            }, 1000);
        }

        // 切换登录方式
        function switchLoginType() {
            state.isPasswordLogin = !state.isPasswordLogin;
            document.getElementById('code').value = '';
            // 可根据需要切换输入框类型
        }

        // 登录处理
        function handleLogin() {
            if (!state.agree) {
                alert('请先阅读并同意协议');
                return;
            }
            
            showLoading();
            setTimeout(() => {
                hideLoading();
                alert('登录成功');
            }, 1500);
            window.location.href = './we103103.htm';
        }

        // 模拟加载效果
        function showLoading() {
            const btn = document.querySelector('.login-btn');
            btn.disabled = true;
            btn.textContent = '登录中...';
        }

        function hideLoading() {
            const btn = document.querySelector('.login-btn');
            btn.disabled = false;
            btn.textContent = '登录';
        }

        // 实时更新数据
        document.getElementById('phone').addEventListener('input', (e) => {
            state.phone = e.target.value;
        });
        document.getElementById('code').addEventListener('input', (e) => {
            state.code = e.target.value;
        });
    </script>
</body>
</html>